<template>
  <div class="user-bar">
    <div class="panel-item hidden-sm-and-down" @click="search">
      <el-icon><el-icon-search /></el-icon>
    </div>
    <div class="screen panel-item hidden-sm-and-down" @click="handleFullScreen">
      <el-icon><el-icon-full-screen /></el-icon>
    </div>
    <div class="panel-item" @click="switchDark">
      <el-icon><component :is="isDark ? 'el-icon-moon' : 'el-icon-sunny'"></component></el-icon>
    </div>
    <Avatar />
  </div>
  <el-dialog v-model="searchVisible" :width="700" title="搜索" center destroy-on-close>
    <search @success="searchVisible = false"></search>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import screenfull from 'screenfull'
import { useTheme } from '@/hooks/useTheme'
import { useUserStore } from '@/stores/modules/user'
import Avatar from './components/Avatar.vue'
import { ElMessage } from 'element-plus'

const { isDark, switchDark } = useTheme()
const userStore = useUserStore()
const searchVisible = ref<boolean>(false)
const isFullscreen = ref(screenfull.isFullscreen)

const username = computed(() => userStore.adminInfo.name)
const search = () => (searchVisible.value = true)

onMounted(() => {
  screenfull.on('change', () => {
    if (screenfull.isFullscreen) isFullscreen.value = true
    else isFullscreen.value = false
  })
})

// 全屏切换
const handleFullScreen = () => {
  if (!screenfull.isEnabled) ElMessage.warning('当前您的浏览器不支持全屏 ❌')
  screenfull.toggle()
}

const changeDarkTheme = () => {}
</script>

<style scoped lang="scss">
.user-bar {
  display: flex;
  align-items: center;
  height: 100%;
}
.user-bar .panel-item {
  padding: 0 10px;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
}
.user-bar .panel-item i {
  font-size: 16px;
}
.user-bar .panel-item:hover {
  background: rgba(0, 0, 0, 0.1);
}
.user-bar .user-avatar {
  height: 49px;
  display: flex;
  align-items: center;
}
.user-bar .user-avatar label {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  cursor: pointer;
}

.msg-list li {
  border-top: 1px solid #eee;
}
.msg-list li a {
  display: flex;
  padding: 20px;
}
.msg-list li a:hover {
  background: #ecf5ff;
}
.msg-list__icon {
  width: 40px;
  margin-right: 15px;
}
.msg-list__main {
  flex: 1;
}
.msg-list__main h2 {
  font-size: 15px;
  font-weight: normal;
  color: #333;
}
.msg-list__main p {
  font-size: 12px;
  color: #999;
  line-height: 1.8;
  margin-top: 5px;
}
.msg-list__time {
  width: 100px;
  text-align: right;
  color: #999;
}

.dark .msg-list__main h2 {
  color: #d0d0d0;
}
.dark .msg-list li {
  border-top: 1px solid #363636;
}
.dark .msg-list li a:hover {
  background: #383838;
}
</style>
